<script setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import * as echarts from 'echarts';

// 获取dom
const top = ref()
const middle = ref()
const timer = ref(null)
let index = 0;
// 实例化图标
const myCharttop = ref()

onMounted(() => {
    myCharttop.value = echarts.init(top.value)
    myCharttop.value.setOption({
        title: {
            text: '青岛地铁开通以来客流量增长比例',
            left: 'center',
            textStyle: {
                color: '#1DDAF0',
                fontWeight: 'bold',
                lineHeight: 20,
                fontSize: '25',
                textBorderColor: '#000'
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
            top: '30',
            textStyle: {
                color: '#1DDAFD',
                fontWeight: 'bold',
                lineHeight: 20,
                fontSize: '12',
                textBorderColor: '#000'
            },

        },
        series: [
            {
                name: '客流量增长比例',
                type: 'pie',
                center: ['60%', '50%'],
                radius: '40%',
                data: [
                    { value: 10, name: '2015年' },
                    { value: 20, name: '2016年' },
                    { value: 30, name: '2017年' },
                    { value: 25, name: '2018年' },
                    { value: 20, name: '2019年' },
                    { value: 15, name: '2020年' },
                    { value: 10, name: '2021年' },
                    { value: 5, name: '2022年' },
                    { value: 10, name: '2023年' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]

    })
})

// 历史发展数据
const historyData = ref([
    '1935年,青岛城市交通规划在中国最早提出建设地铁',
    '1987年,青岛市开始筹建地铁工程。',
    '1989年,青岛编制完成市区“二线一环”线网规划。',
    '1991年,国家计委对青岛地铁一期工程批准立项,即老“三线一环”规划的一号线,当时规划是起于火车站,止于胜利桥。',
    '1994年,青岛市地下铁道公司正式组建。同时,地铁线网规划扩充为“四线一环”。同年12月,一期工程试验段项目和青岛火车站地铁站点开工建设。',
    '1995年,国家下文暂停审批轨道交通项目,青岛地铁项目搁浅。',
    '2000年,青岛地铁一号线工程试验段竣工验收。',
    '2007年,青岛地铁的配套工程——青岛火车站拆除。青岛市委托国家级咨询机构编制完成《青岛市轨道交通建设问题研究》。',
    '2008年2月,青岛轨道交通建设规划编制、报批工作正式启动。',
    '2009年6月26日,青岛地铁一期工程3号线试验段开工。8月13日,《青岛市城市快速轨道交通建设规划,(2009-2016年)》顺利获得国家批复。11月30日,青岛市地铁建设工程奠基仪式在地铁河西站(现地铁大厦站)举行',
    '2010年3月26日,《青岛市地铁3号线工程可行性研究报告》获得国家发改委批复。6月,青岛地铁3号线全线开工。',
    '2012年8月16日,《青岛市地铁2号线一期工程可行性研究报告》获得国家发改委批复。11月2日,青岛地铁集团有限公司成立。11月2日,青岛地铁2号线举行开工典礼',
    '2013年6月,青岛蓝色硅谷城际轨道交通工程(R1号线)全线开工。11月28日,《青岛市城市轨道交通近期建设规划(2013-2018年)》获国家批复。',
    '2014年4月28日,《环渤海地区山东省城际轨道交通网规划(调整)》获国家发改委批复。9月24日,《青岛市红岛-胶南城际(井冈山路-大珠山段)轨道交通工程可行性研究报告》(13号线一期)和《青岛-海阳城际(蓝色硅谷段)轨道交通工程可行性研究报告》(11号线一期)获得青岛市发改委批复。11月15日,青岛市红岛-胶南城际(井冈山路-大珠山段)轨道交通工程(13号线一期)全线开工。11月21日,《青岛地铁1号线工程可行性研究报告》获青岛市发改委批复。年底,青岛地铁1号线开工。',
    '2015年8月20日,《青岛市城市轨道交通线网规划调整》(2015年)公示。 12月16日上午11时,青岛地铁3号线北段开通试运营。',
    '2016年4月26日,《青岛市城市轨道交通近期建设规划调整(2013-2021年)》获国家批复。7月8日,《青岛地铁4号线工程(人民会堂站-沙子口站段)可行性研究报告》获青岛市发改委批复。7月19日,《青岛市地铁4号线(沙子口站-大河东站段) 可行性研究报告》通过青岛市发改委委托的专家评估。11月30日,《青岛市地铁6号线一期工程可行性研究报告》获青岛市发改委批复。12月18日上午11时,青岛地铁3号线南段开通试运营。 年底,《青岛市地铁8号线工程可行性研究报告》获青岛市发改委批复。年底,青岛地铁4号线、青岛地铁8号线开工。',
    '2017年8月21日,青岛地铁2号线一期东段开始空载试运行。12月10日,青岛地铁2号线一期东段开通试运营。 12月31日,青岛地铁11号线开始空载试运行。',
    '2018年4月23日,青岛地铁11号线开通试运营。 9月1日,青岛地铁13号线开始空载试运行。 12月26日,青岛地铁13号线开通试运营。',
    '2019年6月14日,《青岛市地铁2号线一期工程调整(轮渡站-泰山路站段)可行性研究报告》通过青岛市发改委委托的专家评审。9月1日,青岛地铁2号线一期西段开始空载试运行。 10月26日,青岛地铁2号线邮轮母港延长段(一期调整段)举行开工仪式。12月16日,青岛地铁2号线一期西段开通试运营。 12月16日,青岛地铁6号线举行开工仪式。',
    '2020年8月30日,青岛地铁1号线北段、青岛地铁8号线北段开始空载试运行。 12月24日,青岛地铁1号线北段、青岛地铁8号线北段开通试运营。 ',
    '2021年8月19日,《青岛市城市轨道交通近期建设规划(2021-2026年)》获国家批复。9月6日,青岛地铁1号线南段开始空载试运行。 12月30日,青岛地铁1号线南段开通试运营, 青岛地铁2号线二期、青岛地铁5号线、青岛地铁7号线二期举行开工仪式。',
    '2022年4月1日,青岛地铁8号线支线、青岛地铁15号线一期正式开工。7月2日,青岛地铁9号线一期、青岛地铁6号线二期双线开工活动在城阳区举行,标志着青岛市地铁三期项目已全部开工建设,青岛市在建地铁达到11条。 9月1日,青岛地铁4号线开始空载试运行。 9月6日,青岛地铁15号线天山二路站通过项目验收,成为15号线首个开工建设的车站。 12月26日,青岛地铁4号线开通试运营。 ',
    '2023年3月3日,青岛地铁6号线一期工程全线洞通。 3月26日,在青岛地铁8号线支线大涧站盾构井施工现场,青岛地铁三期线路首台盾构机顺利吊装下井。 4月24日,“先锋号”双护盾TBM和“胶州湾1号”盾构机分别从青岛地铁5号线、青岛地铁8号线支线顺利始发,青岛地铁三期工程正式进入机械掘进阶段。 6月30日,青岛地铁2号线海信桥站开通试运营。 7月1日,青岛地铁6号线一期工程全线一次送电成功,顺利实现“电通”。 7月22日,由青岛地铁集团第三建设分公司建设,中铁(上海)投资集团有限公司承建,中铁隧道局集团有限公司施工的山东省在建体量最大地铁车站——青岛地铁闫家山站主体结构完成封顶。 7月8日,青岛地铁13号线二期北段开始为期约3个月的试运行。 7月25日,青岛地铁1号线西镇站开通试运营。8月31日,青岛地铁4号线观象山(市立医院)站正式启用。 10月26日,青岛地铁13号线二期工程(北段)嘉陵江西路站、香江路站正式开通,13号线23座车站将全部投入运营,青岛地铁线网运营车站也将达到150座、运营里程达318公里。'

])
const historyDataCopy = ref('')
function changeAdd() {
    historyDataCopy.value = historyData.value[index]
    index++
    if (index >= historyData.value.length) {
        index = 0
    }
}
onMounted(() => {
    setInterval(() => {
        changeAdd()
    }, 1300)
})

onBeforeMount(() => {
    clearInterval(timer)
})
</script>
<template>
    <div class="right">
        <div class="top" ref="top"></div>
        <div class="middle" ref="middle">
            <div class="title">
                青岛地铁发展史
            </div>
            <div class="content">
                {{ historyDataCopy || '1935年,青岛城市交通规划在中国最早提出建设地铁' }}
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import './index.less';
</style>